/**
 * 滚动视图
 */

import React                                                           from 'react';
import { View, ScrollView, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';

class ScrollScreen extends React.Component {
  static navigationOptions = {
    title: '滚动视图',
  };
  render() {
    return(
      <ScrollView style={styles.container}>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          style={{width: 300, height: 200, backgroundColor: 'cyan'}}>
          <View style={{flex: 1, backgroundColor: 'blue'}}>
            <Image
              style={{width: 300, height: 200, backgroundColor: 'cyan'}}
              source={require('../../images/ic_home.png')}
            />
          </View>
          <View style={{flex: 1, backgroundColor: 'red'}}>
            <Image
              style={{width: 300, height: 200, backgroundColor: 'cyan'}}
              source={require('../../images/ic_me.png')}
            />
          </View>
          <TouchableOpacity
            style={styles.button}
            activeOpacity={0.5}
            onPress={() => {
              getLayout(this).then( v => console.warn(v));
            }}>
            <Text style={{ color: 'black' }}>Go to Details</Text>
          </TouchableOpacity>
        </ScrollView>

        {/*<View style={{height: 300, backgroundColor: 'cyan'}}>*/}
          {/*<View style={{flex: 1, backgroundColor: 'red'}}>*/}

          {/*</View>*/}
          {/*<View style={{flex: 1, backgroundColor: 'blue'}}>*/}

          {/*</View>*/}
          {/*<View style={{flex: 1, backgroundColor: 'yellow'}}>*/}

          {/*</View>*/}
        {/*</View>*/}
      </ScrollView>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  }
});

export default ScrollScreen;